import { Carousel, Switch, Image } from "antd";
import React from "react";

const contentStyle: React.CSSProperties = {
    height: "200px",
    width: "400px",
    border: "dashed 1px",
    color: "black",
    margin: 0,
    textAlign: "center",
    background: "grey",
}

const AntdCarouselDemo: React.FC = () => {
    const carouselChange = (slideNum: number) => {
        // console.log("slideNum", slideNum);
    }
    const switchChange = (checked: boolean) => {
        console.log("checked", checked);
    }

    return (
        <div style={{display: 'flex'}}>
            <Carousel afterChange={carouselChange} arrows autoplay autoplaySpeed={3000} style={contentStyle}>
                <div>
                    <h1>1</h1>
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked onChange={switchChange}/>
                </div>
                <div >
                    <h1>2</h1>
                </div>
                <div >
                    <h1>3</h1>
                </div>
            </Carousel>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Image width={200} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
        </div>
    );
}

export default AntdCarouselDemo;
